import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import './index.less';
import { echartsResize } from '@/utils/index';
import '@/utils/ployfill.js';

function index() {
  const [num, setnum] = useState(300);
  useEffect(() => {
    var chartDom: any = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    var option;
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, num],
          type: 'line',
          smooth: true,
        },
      ],
    };

    option && myChart.setOption(option);
    //echarts自适应
    echartsResize(myChart);

    return () => {
      //先销毁实例再创建图表，减少占用内内存
      myChart.dispose();
    };
  }, [num]);

  return (
    <div className="Overview">
      <div
        // style={{ width: '500px', height: '500px' }}

        id="main"
      ></div>
      <button
        onClick={() => {
          setnum(num + 100);
        }}
      >
        修改
      </button>
    </div>
  );
}

export default index;
